// 头部导航
.community-container{
    .el-header{
        margin: 0;
        padding: 0;
        position: relative;
        margin-bottom: .3rem;
        .el-menu{
            position: fixed;
            top: .8rem;
            width: 7.5rem;
            z-index: 10;
        }
    }
    .nav-menu{
        display: flex;
        align-items: center;
        justify-content: space-between !important;
        font-weight: 600;
        
        height: .88rem;
        border-bottom: none;
        .el-menu-item{
            height: 100%;
            line-height: .88rem;
            font-size: .28rem ;
        }
        
    }
    .serchbox,.publishbox{
        width: .4rem;
        height: .4rem;
        img{
            display: block;
            width: .4rem;
        }
    }
    .el-main{
        padding: 0;
        width: 7.5rem;
    }
}

// 帖子样式
.posts{
    width: 7.5rem;
    border-bottom: .01rem solid hsl(0, 0%, 20%);
    // height: 6.7rem;
    padding: .3rem .3rem .1rem .3rem;
    .el-header{
        height: .88rem !important;
        display: flex;
    }
    .post-title{
        height: .88rem;
        padding-left: .2rem;
        p{
            font-size: .32rem;
            font-weight: normal;
            display: block;
            height: .5rem;
            line-height: .5rem;
        }
        span{
            display: block;
            height: .3rem;
            line-height: .3rem;
            margin-top: .08rem;
        }
    }
    .el-avatar{
        width: .88rem;
        height: .88rem;
        
    }
    .tools{
        height: .88rem;
        width: 1.4rem;
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: space-between;
        right: 0;
        top: 0;
        button{
            font-size: .28rem;
            border: none;
            background: none;
        }
        img{
            box-sizing: content-box;
            padding: .1rem;
            height: .3rem;
            width: .3rem;
        }
    }
    // 文字部分
    .content{
        font-weight: normal;
        font-size: .28rem;
        line-height: .45rem;
        margin: .1rem 0;
        letter-spacing: .02rem;
        overflow: hidden;
        /* 2.用省略号来代替超出文本 */
        text-overflow: ellipsis;
        /* 3.设置盒子属性为-webkit-box  必须的 */
        display: -webkit-box;
        /* 4.-webkit-line-clamp 设置为2，表示超出2行的部分显示省略号，如果设置为3，那么就是超出3行部分显示省略号 */
        -webkit-line-clamp: 2;
        /* 5.字面意思：单词破坏：破坏英文单词的整体性，在英文单词还没有在一行完全展示时就换行  即一个单词可能会被分成两行展示 */
        word-break: break-all;
        /* 6.盒子实现多行显示的必要条件，文字是垂直展示，即文字是多行展示的情况下使用 */
        -webkit-box-orient: vertical;
    }
    // 图片
    .imgbox{
        width: 6.9rem;
        max-height: 4.6rem;
        margin: .1rem 0;
        img{
            display: block;
            max-width: 6.9rem;
            max-height: 4.6rem;
        }
    }
    // 底部按钮
    .el-footer{
        padding: 0;
        margin-top: .2rem;
        height: .55rem !important;
        display: flex;
        justify-content: space-between;
        div{
            display: flex;
            align-items: center;
            height: 100%;
            // width: 1.5rem;
        }
        img{
            width: .45rem;
        }
        span{
            margin: 0 .15rem;
            font-size: .22rem;
            font-weight: lighter;
        }
        .last{
            margin-right: 0;
        }
    }
}

.el-main{
    width: 7.5rem;
}

// 话题页
.topics{
    padding: 0 .3rem;
    .topcolumnbox{
        img{
            display: block;
            width: 2rem;
            height: 1rem;
        }
        width: 6.9rem;
        height: 1.4rem;
        display: flex;
        justify-content: space-between;
        border-bottom: .02rem solid rgba(153, 153, 153, .6);
    }
}
.topiclist{
    width: 6.9rem;
    li{
        height: 2.88rem;
        border-bottom: .02rem solid rgba(153, 153, 153, .6);
    }
}
.topic-item{
    position: relative;
    width: 100%;
    height: 100%;
    padding: .39rem 0 .39rem .54rem;
    display: flex;
    justify-content: space-between;
    img{
        display: block;
        width: 2.44rem;
        height: 1.72rem;
    }
}
.top3-icon{
    position: absolute;
    width: .32rem;
    height: .52rem;
    top: .39rem;
    left: 0;
    // background: white;
    font-size: .34rem;
    font-weight: bolder;
    line-height: .52rem;
    text-align: center;
    border-radius: .04rem;
}
.topiclist li:nth-child(1){
    .top3-icon{
        background: #db573e;
    }
}
.topiclist li:nth-child(2){
    .top3-icon{
        background: #ff8d38;
    }
}
.topiclist li:nth-child(3){
    .top3-icon{
        background: #ffc966;
    }
}
.topic-text{
    position: relative;
    p{
        // display: block;
        width: 3.39rem;
        height: 1.32rem;
        line-height: .44rem;
        font-size: .28rem;
        word-break: break-all;
        overflow: hidden;
        /* 2.用省略号来代替超出文本 */
        text-overflow: ellipsis;
        /* 3.设置盒子属性为-webkit-box  必须的 */
        display: -webkit-box;
        /* 4.-webkit-line-clamp 设置为2，表示超出2行的部分显示省略号，如果设置为3，那么就是超出3行部分显示省略号 */
        -webkit-line-clamp: 3;
        /* 5.字面意思：单词破坏：破坏英文单词的整体性，在英文单词还没有在一行完全展示时就换行  即一个单词可能会被分成两行展示 */
        word-break: break-all;
        /* 6.盒子实现多行显示的必要条件，文字是垂直展示，即文字是多行展示的情况下使用 */
        -webkit-box-orient: vertical;
    }
    span{
        position: absolute;
        left: 0;
        bottom: 0;
        font-size: .24rem;
        color: #ff9625;
    }
}